<template>
  <div class="production">
    <div class="container">
      <div class="container_title">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">商品统计</span>
      </div>
      <div class="container_content">
        <div class="a_box">
          <div class="production_general">
            <div class="p_title">
              <span>商品概览</span>
            </div>
            <div class="p_handle">
              <Button type="primary" >查询</Button>
              <Button type="primary" >导出</Button>
            </div>
          </div>
          <div class="production_general_list">
            <ul>
              <li
                v-for="(item,index) in general_list"
                :key="index">
                <div class="g_box">
                  <span class="iconfont" :class="item.icon" :style="{background: item.color}"></span>
                </div>
                <div class="g_box">
                  <div class="g_title">{{item.name}}</div>
                  <p class="ti">{{item.num}}</p>
                  <p class="up">
                    <span>环比增长:</span>
                    <span :class="item.percent<=0?'down':'up'">
                      <i class="text">{{item.percent}}</i>
                      <i class="iconfont" :class="item.percent<=0?'icon-arrow-down-filling':'icon-arrow-up-filling'"></i>
                    </span>
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="production_charts">
            <production_eChart />
          </div>
        </div>
        <div class="a_box">
          <div class="production_rank">
            <div class="p_title">
              <span>商品排行</span>
            </div>
            <div class="p_handle">
              <Button type="primary" >查询</Button>
            </div>
          </div>
          <div class="production_rank_list">
            <el-table
              :data="production_list[pageIndex-1]"
              style="width: 100%"
              :row-class-name="clickProduction"
              :header-cell-style="getRowClass"
              v-loading="loading"
              size="small">
              <el-table-column
                label="商品图"
                width="120">
                <template slot-scope="scope">
                  <viewer :images="scope.row.image">
                    <div class="img" v-for="(item,index) of scope.row.image" :key="index">
                      <img v-show="index===0" :src="item" alt="">
                    </div>
                  </viewer>
                </template>
              </el-table-column>
              <el-table-column
                prop="store_name"
                label="商品名称"
                width="300">
              </el-table-column>
              <el-table-column
                prop="visit"
                sortable
                label="浏览量">
              </el-table-column>
              <el-table-column
                prop="user"
                sortable
                label="访客数">
              </el-table-column>
              <el-table-column
                prop="cart"
                sortable
                label="加购件数">
              </el-table-column>
              <el-table-column
                prop="orders"
                sortable
                label="下单件数">
              </el-table-column>
              <el-table-column
                prop="price"
                label="支付金额">
              </el-table-column>
              <el-table-column
                label="毛利率(%)">
                <template slot-scope="scope">
                  <p>{{scope.row.profit * 100}}.00%</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="collect"
                label="收藏数">
              </el-table-column>
              <el-table-column
                label="访客-支付转化率(%)"
                width="160">
                <template slot-scope="scope">
                  <p>{{scope.row.changes * 100}}.00%</p>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="60">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page">
            <Page :total="total" @on-change="changePage"></Page>
          </div>
        </div>
      </div>
    </div>
    <aside>
      <Modal
        v-model="checkModal"
        :closable="false"
        width="400">
        <div class="production_detail" v-if="production_detail">
          <div class="p_title">商品详情</div>
          <div class="p_body">
            <div class="slider">
              <el-carousel height="400px" indicator-position="none">
                <el-carousel-item v-for="(item,index) in production_detail.productInfo.slider_image" :key="index">
                  <img :src="item" alt="">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="p_info">
              <div class="price">
                <i class="c_r f_s">￥</i>
                <span class="c_r f_l">{{production_detail.productInfo.price}}</span>
                <i class="c_b f_s">￥</i>
                <span class="c_b f_s">{{production_detail.productInfo.vip_price}}</span>
                <img src="../../../assets/imgs/svip.png" alt="">
              </div>
              <div class="name">
                <span>{{production_detail.productInfo.store_name}}</span>
              </div>
              <p>
                <i>原价:<span>{{production_detail.productInfo.ot_price}}</span></i>
                <i>销量:<span>{{production_detail.productInfo.sales}}</span></i>
                <i>库存:<span>{{production_detail.productInfo.stock}}</span></i>
              </p>
            </div>
            <div class="hr"></div>
            <div class="p_intro">
              <div class="p_title">商品介绍</div>
              <div class="p_content" v-html="production_detail.productInfo.description"></div>
            </div>
          </div>
        </div>
        <div slot="footer"></div>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import production_eChart from './production_eChart.vue'
  import general_list from '../../../apiData/statistics/general.js'
  import production_list from '../../../apiData/statistics/production_list.js'
  export default {
    name: "production",  // 商品统计
    data() {
      return {
        checkModal: false,
        loading: false,
        general_list: [],
        production_list: [],
        total: 0,
        pageIndex: 1,
        production_detail: {},  // 商品详情
        pic: 0
      }
    },
    components: {
      production_eChart
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.general_list = general_list;
        this.total = production_list.total;
        this.production_list = production_list.list;
        this.production_detail = this.production_list[this.pageIndex-1][0].detail
      },
      clickProduction({row, rowIndex}) {
        if (rowIndex === this.rowIndex) {
          return 'active-row';
        }
        return '';
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      handleClick(row) {
        this.checkModal = true;
        this.production_detail = row.detail;
      },
      // 换页
      changePage(page) {
        this.pageIndex = page
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .production {
    .container_content{
      background: transparent;
      .a_box{
        border-radius: 4px;
        /*border: 1px solid #0f0;*/
        margin-bottom: 16px;
        padding: 16px;
        .production_general,
        .production_rank{
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .p_title{
            span{
              font-size: 15px;
            }
          }
          .p_handle{
            button{
              margin-left: 10px;
            }
          }
        }
        .production_general_list{
          ul{
            display: flex;
            flex-wrap: wrap;
            li{
              width: 20%;
              display: flex;
              margin-bottom: 20px;
              .g_box{
                span.iconfont{
                  display: flex;
                  width: 36px;
                  height: 36px;
                  border-radius: 50%;
                  background: #2d8cf0;
                  color: #fff;
                  font-size: 20px;
                  text-align: center;
                  line-height: 36px;
                  padding: 0 8px;
                }
                .g_title{
                  margin: 4px 0 8px;
                }
                .ti{
                  font-size: 30px;
                }
                .up{
                  display: flex;
                  align-items: center;
                  span{
                    margin-right: 4px;
                    i{
                      font-size: 10px;
                      font-style: oblique;
                    }
                  }
                  span.up{
                    color: #f5222d;
                  }
                  span.down{
                    color: #39c15b;
                  }
                }
              }
              .g_box:first-child{
                padding-right: 10px;
              }
            }
          }
        }
        .production_rank_list{
          /deep/ .el-table{
            .img{
              img{
                max-width: 50px;
                max-height: 50px;
                cursor: pointer;
              }
            }
            .active-row{
              background: #ebf7ff;
            }
            .hover-row{
              background: #ebf7ff !important;
            }
          }
        }
        .page{
          padding: 6px 0;
          text-align: right;
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  /deep/ .ivu-modal {
    .ivu-modal-body{
      padding: 0;
    }
    .ivu-modal-content{
      border-radius: 0;
    }
    .ivu-modal-footer{
      border-top: none;
      padding: 0;
    }
    .production_detail::-webkit-scrollbar {
      width: 1px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    .production_detail{
      max-height: 700px;
      overflow-y: auto;
      .p_title{
        text-align: center;
        font-size: 16px;
        padding: 10px 0;
      }
      .p_body{
        .slider{
          overflow: hidden;
          img{
            min-width: 100%;
            height: 100%;
          }
        }
        .p_info{
          padding: 10px;
          .price{
            .c_r{
              color: #F00;
            }
            .f_l{
              font-size: 20px;
            }
          }
          .name{
            span{
              color: #333;
            }
          }
          p{
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            span{
              color: #888;
            }
          }
        }
        .hr{
          height: 10px;
          background: #ddd;
        }
        .p_intro{
          /deep/ .p_content{
            img{
              max-width: 100%;
            }
          }
        }
      }
    }
  }
</style>
